<!-- 用户协议需知 -->
<template>
  <div class="page_auth">
    <div class="agreement" v-if="showAgreement">
      <div class="agreement-header">用户需知</div>
      <div class="agreement-container">
        在您使用小程序之前，请仔细阅读<span @click="handleOpenAgreement">{{privacyContractName}}</span>
        如您同意{{privacyContractName}} ，请点击“同意”开始使用小程序
      </div>
      <div class="agreement-footer">
        <navigator target="miniProgram" open-type="exit">
          <van-button  size="small">不同意</van-button>
        </navigator> 
        <van-button type="primary" size="small" open-type="agreePrivacyAuthorization" @click="handleAuth">同意</van-button>
      </div>
    </div>
    <div class="loading_bg" v-else-if="!showAgreement && time">
      <span class="countDown" @click="handleClose">剩余{{ time }}s，点击跳转</span>
      <swiper indicator-dots :autoplay="autoplay" :interval="2000" :duration="500">
        <div v-for="(item, index) in imgList" :key="index">
          <swiper-item>
            <img :src="item" class="swiper-item" />
          </swiper-item>
        </div>
      </swiper>
    </div>
  </div>
</template>
<script>

export default {
    data() {
      return {
        privacyContractName: '',
        showAgreement: '',
        imgList: [
          "https://img1.baidu.com/it/u=1458656822,2078909008&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750",
          "https://z1.muscache.cn/pictures/lombard/MtTemplate-1740560-media_library/original/125b3d6a-b467-4ee2-afec-3d629ad91220.jpeg",
          "https://ac-q.static.booking.cn/images/hotel/max1024x768/136/136629253.jpg"
        ],
        autoplay: true,
        time: 0,
        timer: null
      }
    },
    created() {
      setTimeout(() => {
        wx.getPrivacySetting({
          success: res=>{
            console.log(res);
            this.showAgreement = res.needAuthorization;
            this.privacyContractName = res.privacyContractName;
            if(!this.showAgreement) {
              this.time = 6;
              setTimeout(() => {
                this.getCountDown();
              }, 200);
            }
          }
        })
      }, 400);
    },
    methods: {
      handleAuth() {
        this.showAgreement = false;
        this.time = 6;
        setTimeout(() => {
          this.getCountDown();
        }, 200);
      },
      handleClose() {
        if(this.timer) clearInterval(this.timer);
        wx.reLaunch({
          url: '/pages/index/main'
        })
      },
      handleOpenAgreement() {
        wx.openPrivacyContract();
      },
      getCountDown() {
        this.timer = setInterval(() => {
          this.time -= 1;
          if(this.time == 1) {
            this.autoplay = false;
            clearInterval(this.timer);
            setTimeout(() => {
              wx.reLaunch({
                url: '/pages/index/main'
              })
            }, 500);
          }
        }, 1000);
      }
    },
  }
</script>

<style lang="scss">
.page_auth {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  .agreement {
    width: 80%;
    height: 240px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    box-shadow: 0 0 5px #999;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    .agreement-header {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      flex-shrink: 0;
      text-align: center;
      border-bottom: 1px solid #eee;
      font-weight: bold;
      font-size: 36rpx;
    }
    .agreement-container {
      padding: 12px 24px;
      height: 100%;
      overflow: overlay;
      font-size: 26rpx;
      line-height: 24px;
      span {
        color: #1890FF;
        cursor: pointer;
      }
    }
    .agreement-footer {
      height: 108rpx;
      line-height: 100rpx;
      flex-shrink: 0;
      text-align: right;
      padding: 0 12px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: flex-end;
      ._navigator {
        margin-right: 12px;
      }
    }
  }
  .loading_bg {
    width: 100%;
    height: 100%;
    position: relative;
    ._swiper {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .countDown {
      position: absolute;
      top: 56px;
      left: 12px;
      background: #89bdee;
      color: #fff;
      font-size: 26rpx;
      z-index: 100;
      padding: 6px 12px;
      border-radius: 20px;
    }
  }
}
</style>
